<template>
  <el-drawer title="手动匹配素材"
             :visible.sync="drawerVisible"
             :modal-append-to-body="false"
             :append-to-body="true"
             :destroy-on-close="true"
             :wrapperClosable="false"
             :before-close="matchClose"
             size="60%">
    <div style="width: 98%; height:100%;margin: 0 auto;display: flex; flex-direction: column; ">
      <!--      <beetles-search @search-form="submitForm" @empty-form="emptyForm" :expend="false">-->
      <!--        <template slot-scope="{searchConceal}" slot="searchForm">-->
      <div style="display: flex; flex-direction: row; ">
        <el-form :model="creativeForm" inline ref="creativeForm" label-width="85px" style="flex: 1;">
          <div style="display: flex;flex-wrap: wrap">
            <el-form-item label="短ID" prop="stringShortId">
              <el-input size="mini" v-model="creativeForm.stringShortId" clearable style="width: 130px;"
                        placeholder="请输入短ID"></el-input>
            </el-form-item>
            <el-form-item label="本地文件名" prop="localFilename">
              <el-input size="mini" v-model="creativeForm.localFilename" clearable style="width: 130px"
                        placeholder="请输入本地文件名"></el-input>
            </el-form-item>
            <el-form-item label="素材名称" prop="name">
              <el-input size="mini" v-model="creativeForm.name" clearable style="width: 130px"
                        placeholder="请输入素材名称"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type">
              <el-select size="mini" v-model="creativeForm.type" clearable filterable style="width: 130px"
                         placeholder="请选择素材类型">
                <el-option v-for="(item,index) in typeList" :key="index" :value="item.value" :label="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
        <div class="search-button" style="margin-top: 6px; margin-right: 15px">
          <el-button type="primary" size="mini" @click="submitForm" style="width: 60px;">搜索</el-button>
          <el-button size="mini"  @click="emptyForm" style="width: 60px;">清空</el-button>
        </div>
      </div>
      <!--        </template>-->
      <!--      </beetles-search>-->

      <div class="creative-table" style="flex: 1; overflow-y: scroll">
        <avue-crud ref="multipleTable"
                   :option="option"
                   :data="creativeData"
                   :page.sync="page"
                   :table-loading="loading"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @on-load="onCreativeLoad"
        >
          <template slot="radio"
                    slot-scope="{row}">
            <el-radio v-model="selectRow"
                      :label="row.$index">&nbsp;</el-radio>
          </template>
          <template slot-scope="{ row }" slot="creativeUrl2">
            <div class="cell">
              <div v-if="row.thumbnailUrl !== '-1' && row.thumbnailUrl !== '-2'">
                <el-image
                  fit="contain"
                  :src="row.thumbnailUrl"
                  style="width: 80px;height: 80px;"/>
              </div>
            </div>
          </template>
        </avue-crud>
      </div>

      <div style="height:90px;display: flex;justify-content: center;">
        <el-row>
          <el-button type="primary" size="small" @click="selectCreative" :disabled="selectRow == null">确定</el-button>
          <el-button size="small" @click="matchClose">取消</el-button>
        </el-row>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import {getList} from "@/api/offer/creative";
import beetlesSearch from "@/components/basic-components/beetles-search"

export default {
  name: "notfoundSearchCreative",
  components: {
    beetlesSearch
  },
  props: {
    drawerVisible: false,
    offerId: ''
  },
  data() {
    return {
      loading: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      creativeForm: {
        stringShortId: '',
        name: '',
        localFilename: '',
        type: null,
      },
      creativeData: [],
      selectRow: null,
      // selectCreativeList: [],
      typeList: [
        {label: '图片', value: '0'},
        {label: '视频', value: '1'}
      ],
      option: {
        tip: false,
        refreshBtn: false,
        columnBtn: false,
        addBtn: false,
        index: false,
        menu: false,
        selection: false,
        column: [
          {
            label: '',
            prop: 'radio',
            width: 50,
            hide: false
          },
          {
            label: "素材",
            prop: "creativeUrl2",
            width: 90,
          },
          {
            label: "短ID",
            prop: "shortId",
            width: 90,
          },
          {
            label: "素材名称",
            prop: "name",
          },
          {
            label: "本地文件名",
            prop: "localFilename",
          },
          {
            label: "类型",
            prop: "type",
            type: 'select',
            width: 80,
            dicData: [
              {label: '图片', value: 0},
              {label: '视频', value: 1}
            ],
          },
        ]
      },
    }
  },
  methods: {
    rowClick(row) {
      this.selectRow = row;
    },
    submitForm() {
      this.page.currentPage = 1;
      this.onCreativeLoad(this.page, {});
    },
    emptyForm() {
      this.creativeForm = {
        stringShortId: '',
          name: '',
          localFilename: '',
          type: null,
      };
      this.submitForm();
    },
    matchClose(done) {
      this.drawerVisible = false
      this.creativeForm = {}
      this.selectRow = null;
      this.creativeData = [];
      this.$emit('close', done)
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    //手动匹配选择素材
    selectCreative() {
      if (this.selectRow != null) {
        let firstCreative = this.creativeData[this.selectRow];
        let creative = {};
        let relateCreative = {};
        let offer = {};
        relateCreative.creativeUrl = firstCreative.creativeUrl;
        relateCreative.thumbnailUrl = firstCreative.thumbnailUrl;
        relateCreative.id = firstCreative.id;
        relateCreative.name = firstCreative.name;
        relateCreative.shortId = firstCreative.shortId;
        relateCreative.type = firstCreative.type;
        relateCreative.localFilename = firstCreative.localFilename;
        relateCreative.designer = firstCreative.designer;
        relateCreative.platform = firstCreative.platform;
        relateCreative.country = firstCreative.country;
        offer.offerName = firstCreative.offerName;
        creative.offer = offer;
        creative.relateCreative = relateCreative;
        this.matchClose();
        this.$emit("select", creative);
      }
    },
    onCreativeLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        this.offerId,
        Object.assign(params, this.creativeForm)
      ).then(res => {
        const data = res.data.data;
        data.records.map((item) => {
          item.designer = item.designer.split(",");
          item.originator = item.originator.split(",");
        });
        this.creativeData = data.records;
        this.page.total = data.total;
        this.selectRow = null;
        console.log(this.page.total)
        this.loading = false;
      })
    },
    // watch: {
    //   drawerVisible: {
    //     handler(val, old) {
    //       console.log(val);
    //       if (val === true) {
    //         this.submitForm();
    //       }
    //     }
    //   },
    // }
  }
}
</script>

<style scoped lang="scss">
.creative-table {
  /deep/ .avue-crud__menu {
    min-height: 0;
  }
}
</style>
